<template>
    <div class="hotlist">
        <h3>热门搜索</h3>
        <ul class="hotSearch">
            <li v-for="(hot,index) in hotSearchList" :key="index" @click="$emit('change',hot.first)">{{hot.first}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    name:'HotSearch',
    data(){
        return{
            hotSearchList: [],
        }
    },
    created(){
        this.$http.get('/search/hot').then( data =>{
            this.hotSearchList =  data.data.result.hots;
        }).catch(err=>{
            console.log(err);
        });
    }
}
</script>

<style lang="less" scoped>
.hotlist{
    padding: 15px 10px 0;
    h3{
        font-size: 12px;
        line-height: 12px;
        color: #666;
    }
    ul{
        margin: 10px 0 7px;
        li{
            display: inline-block;
            height: 32px;
            margin-right: 8px;
            margin-bottom: 8px;
            padding: 0 14px;
            font-size: 14px;
            line-height: 32px;
            color: #333;
            border: 1px solid#d3d4da;
            border-radius: 32px;
        }
    }
}
</style>